<template>
<div>

	<el-row>
	<el-col :span="24">
		<el-alert title="" type="warning">
			<p>1，类型的位置在商城简介下边，每行5个。</p>
			<p>2，类型图片要求正方形。图片大小控制在50K以下。</p>
			<p>3，类型名称不要超过5个字，排序数字越大越靠前。</p>
	  	</el-alert>
	</el-col>
	<el-col :span="24" class="mt10">
	<el-card class="box-card">
	  	<el-form :inline="true" :model="configInfo" >
	  		<el-form-item label="是否启用">
			    <el-switch v-model="configInfo.type" 
			    active-value="1" inactive-value="0"></el-switch>
			</el-form-item>

		  	<el-form-item label="图标大小">
		    	<el-input v-model="configInfo.typeimgsize" placeholder="图标大小"></el-input>
		  	</el-form-item>
		  
		  	<el-form-item>
		   		<el-button type="primary" @click="onSubmit">保存</el-button>
		  	</el-form-item>
		</el-form>
	</el-card>
	</el-col>
	</el-row>
	<el-row :gutter="20" class="mt20">
	  	<el-col v-for="item in typeList"  :span="4" class="text-center mt10">
	  		<img :src="item.logo" width="60%" 
	  		@click="handlePictureCardPreview(item)" class="pointer">
	  		<el-form class="mt10"
				:model="item" 
				label-width="40px"
				>
				<el-form-item label="名称" class="mb0">
					<el-input v-model="item.type_name" size="medium" >
					</el-input>
				</el-form-item>
				<el-form-item label="排序" class="mb0">
					<el-input v-model="item.asort" size="medium" >
					</el-input>
				</el-form-item>
			</el-form>	
			<el-button-group>
				<el-button type="primary" size="medium" @click="asort(item)"> 保存</el-button>
				<el-button type="danger" size="medium" icon="el-icon-delete" @click="del(item)"></el-button>
			</el-button-group>

	  	</el-col>

	  	<el-col :span="4" class="mt10">
	  		<el-upload
			  :action="URL.upload"
			  :data="para"
			  list-type="picture-card"
			  :before-upload="beforeAvatarUpload"
			  :on-success="success"
			  :on-preview="handlePictureCardPreview"
		  	  :on-remove="handleRemove"
		  	  :multiple="true"
		  	  :show-file-list="false"
			  >
			  <i class="el-icon-plus"></i>
			</el-upload>
	  	</el-col>
	</el-row>
	
	<el-dialog :visible.sync="dialogVisible">
	  <img width="100%" :src="dialogImageUrl" alt="">
	</el-dialog>

</div>		
</template>

<script>

import { mapGetters } from 'vuex';

export default {
	name: 'configInfo_type',
		data () {
		return {
			
		  	dialogVisible : false,
		  	dialogImageUrl : '',
		}
	},

	props: {
		configInfo : Object,
	},

	components: {
		
	},

	computed : {
		...mapGetters([
			'typeList',
			'userInfo',
			'URL',
			'common',
		]),

		para () {
			return {
				dir : this.userInfo.company_code + '/shopconfig/',
			}
		},
	},

	methods : {
		beforeAvatarUpload (file) {
	        const isLtM = file.size / 1024 / 1024 < this.common.imgMaxSize;

	        if (!isLtM) {
	          this.$message.error('上传图片大小不能超过 ' + this.common.imgMaxSize + 'MB!');
	        }
	        return isLtM;
		},

		success (res, file) {
			let para = {
				'logo' : res.url,
				'type_name' : '新建类型', 
				//'asort' : 0,
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '操作成功',
			          type: 'success'
			        });
			        this.$store.dispatch('getTypeList');
				},
				err : res => {
					this.$notify({
			          title: '失败',
			          message: res,
			          type: 'error'
			        });
				}
			};

			this.$store.dispatch('updateType', para);
		},

		handleRemove(file, fileList) {
	        console.log(file, fileList);
	    },

	    handlePictureCardPreview(item) {
	    	console.log(item);
	        this.dialogImageUrl = item.logo;
	        this.dialogVisible = true;
	    },

	    asort (item) {
	    	let para = {
	    		'id' : item.id,
	    		'type_name' : item.type_name,
	    		'asort' : item.asort,
	    		cb : res => {
					this.$notify({
			          title: '成功',
			          message: '操作成功',
			          type: 'success'
			        });
			        this.$store.dispatch('getTypeList');
				},
				err : res => {
					this.$notify({
			          title: '失败',
			          message: res,
			          type: 'error'
			        });
				}
	    	}

	    	this.$store.dispatch('updateType', para);
	    },

	    del (item) {

	    	this.$confirm('此操作将删除该类型, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
	          	let para = {
		    		'id' : item.id,
		    		'del_flg' : '1',
		    		cb : res => {
						this.$notify({
				          title: '成功',
				          message: '删除成功',
				          type: 'success'
				        });
				        this.$store.dispatch('getTypeList');
					},
					err : res => {
						this.$notify({
				          title: '失败',
				          message: res,
				          type: 'error'
				        });
					}
		    	}

		    	this.$store.dispatch('updateType', para);

	        }).catch(() => {
	                
	        });


	    	
	    },


	    onSubmit () {
	    	let para = {
	    		id : this.configInfo.id,
	    		type : this.configInfo.type,
	    		typeimgsize : this.configInfo.typeimgsize,
	    		cb : res => {
					this.$notify({
			          title: '成功',
			          message: '保存成功',
			          type: 'success'
			        });
				},
				err : res => {
					this.$notify({
			          title: '保存失败',
			          message: res,
			          type: 'error'
			        });
				}
	    	};

	    	this.$store.dispatch('updateConfig_type', para);
	    }
	},

	watch:{
	    
	},

	mounted () {
		
		this.$store.dispatch('getTypeList');
	},

}
</script>

<style scoped>

</style>
